<template>
  <div id="noticeListPage">
    <a-row :gutter="[16, 24]">
      <a-col :span="6" v-for="item in dataList" :key="item.id" @click="clickToProfile(item.id)">
        <a-card hoverable :title="dayjs(item.createTime).format('YYYY-MM-DD')">
          <template #cover>
            <img :src="item.picture" style="height: 160px" />
          </template>
          <a-card-meta :title="item.title" :description="item.summary"> </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
    <div style="margin-top: 32px; text-align: right">
      <a-pagination
        v-model:current="searchParam.current"
        :total="total"
        :defaultPageSize="8"
        @change="onChange"
        show-less-items
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { listNoticeByPageUsingPost } from '@/api/noticeController.ts'
import { message } from 'ant-design-vue'
import router from '@/router'
import dayjs from 'dayjs'

const dataList = ref<API.Notice[]>([])
const total = ref(0)
// 搜索条件
const searchParam = reactive<API.NoticeQueryRequest>({
  current: 1,
  pageSize: 8,
  status: 1
})

// 获取数据
const fetchData = async () => {
  const res = await listNoticeByPageUsingPost({
    ...searchParam,
  })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    message.error('获取数据失败' + res.data.message)
  }
}

const onChange = (page: number, pageSize: number) => {
  searchParam.current = page
  searchParam.pageSize = pageSize
  fetchData()
}

const clickToProfile = (id: any) => {
  router.push(`/teaUser/notice/${id}`)
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
#noticeListPage {
  padding: 16px;
}
</style>
